<template>
  <div>
      <div class="tou inner">
          <van-icon @click="arrow()" name="arrow-left" />
          <span>完成</span>
      </div>
      <div class="ban inner">
          <h1>学生版</h1>
          <span><van-icon name="exchange" />切换为职场版</span>
      </div>

      <div class="zhiwei inner">
          <p v-for="(v,i) in arr" :key="i">
            <img :src="v.imgurl" alt="">
            <span>{{v.txt}}</span>
            <van-icon name="sort" />
          </p>
      </div>
  </div>
</template>

<script>
export default {
    data(){
        return {
            arr:[
                {imgurl:"imgs/faxian.jpg",txt:"发现"},
                {imgurl:"imgs/shixi.jpg",txt:"实习"},
                {imgurl:"imgs/jianzhi.jpg",txt:"兼职"},
                {imgurl:"imgs/quanzhi.jpg",txt:"全职"}
            ]
        }
    },
    methods:{
        arrow(){
            this.$router.push('/job')
        }
    }
}
</script>

<style scoped>
.inner {
    margin: 0.20rem 0.20rem;
}
.tou {
    display: flex;
    justify-content: space-between;
}
.tou > i {
    font-size: 0.20rem;
}
.tou > span {
    font-size: 0.16rem;
    color: #39c0ba;
}
.ban {
    display: flex;
    justify-content: space-between;
    margin: 0.60rem 0.20rem;
}
.ban > h1 {
        font-weight: bold;
    font-size: 0.20rem;
}
.ban > span {
    font-size: 0.14rem;
    padding: 0.06rem 0.14rem;
    background: #39c0ba;
    color: #fff;
    border-radius: 0.20rem;
}
.ban > span > i {
    margin-right: 0.04rem;
}


/* zhiwei */
.zhiwei > p {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 0.01rem solid #ccc;
    border-radius: 0.06rem;
    margin-bottom: 0.10rem;
}
.zhiwei > p > span {
    font-size: 0.16rem;
    font-weight: bold;
}
.zhiwei > p > i {
    margin-right: 0.10rem;
    font-size: 0.18rem;
    background: #c7f2f3;
    color: #39c0ba;
}
</style>